<template>
  <view class="container">
    <image v-if="imageUrl" :src="imageUrl" class="circle-image" style="display: block; margin: 20rpx auto;"></image>
    <button @click="chooseAndPreview">选择并预览图片</button>
	 <button @click="previewImage">预览图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    chooseAndPreview() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          // 先预览图片
          uni.previewImage({
            current: tempFilePath,
            urls: [tempFilePath]
          })
          // 再将图片显示在界面上（圆形）
          this.imageUrl = tempFilePath
        }
      })
    },
	// 预览图片
	    previewImage() {
	      if (!this.imageUrl) {
	        uni.showToast({
	          title: '请先选择图片',
	          icon: 'none'
	        })
	        return
	      }
	      uni.previewImage({
	        current: this.imageUrl,
	        urls: [this.imageUrl]
	      })
	    }
	  
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.circle-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-bottom: 30rpx;
}
button {
  margin-bottom: 20rpx;
  border-radius: 22rpx;
}
</style>